<template>
  <sub-page>
    <main-card>
      <card-top-info title="基本信息"> </card-top-info>
      <el-form
        ref="chapter"
        :rules="rules"
        :model="chapter"
        label-width="120px"
        class="chapter"
        :show-message="true"
        v-loading="loading"
        element-loading-text="上传文件中， 请勿离开当前页面"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-form-item label="小节名称" prop="album_info_title">
          <el-input v-model="chapter.album_info_title"></el-input>
        </el-form-item>

        <el-form-item label="小节类型" prop="audio_address">
          <el-radio disabled v-model="media" label="audio">音频</el-radio>
          <el-radio disabled v-model="media" label="video">视频</el-radio>
        </el-form-item>

        <el-form-item label="音频" prop="audio_address" v-if="media === 'audio'">
          <el-upload
            :disabled="!!album_info_id"
            class="head-upload"
            name="testfile"
            accept="audio/flac, audio/mp3"
            :show-file-list="false"
            :http-request="handleFile"
            action
          >
            <div class="img-wrap">
              <div class="uploadImg-btn">
                <el-button type="primary" size="small" icon="el-icon-circle-plus">选择音频</el-button>
                <div class="tips">建议格式：MP3</div>
              </div>
              <audio :src="chapter.audio_address" class="cusaudio" ref="cusaudio" controls="controls"></audio>
              <!-- <audio src="https://www.w3school.com.cn/i/horse.ogg" class="cusaudio"></audio> -->
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="视频" prop="video_address" v-if="media === 'video'">
          <el-upload
            :disabled="!!album_info_id"
            class="head-upload"
            name="testfile"
            :show-file-list="false"
            :http-request="handleFile"
            action
            accept="video/mp4, video/webm"
          >
            <div class="img-wrap">
              <div class="uploadImg-btn">
                <el-button type="primary" size="small" icon="el-icon-circle-plus">选择视频</el-button>
                <div class="tips">建议格式：MP4</div>
              </div>
              <video :src="chapter.video_address" class="cusvideo" ref="cusvideo"></video>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item label="集数" prop="sort">
          <el-input-number v-model="chapter.sort" :min="1" label="集数"></el-input-number>
        </el-form-item>

        <el-form-item label="是否试看" prop="is_need_pay">
          <el-radio v-model="chapter.is_need_pay" label="0">试看</el-radio>
          <el-radio v-model="chapter.is_need_pay" label="1">付费</el-radio>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="reBack">取消</el-button>
        </el-form-item>
      </el-form>
    </main-card>
  </sub-page>
</template>

<script>
import SubPage from '@/components/subPage';
import MainCard from '@/components/mainCard';
// import MyTable from '@/components/myTable';
import CardTopInfo from '@/components/cardTopInfo';
import { saveChapterDetail, editChapterDetail, getChapterDetail, upLoadMediaFile } from '@/api/app/course';
// album_title, album_desc, album_cover_urlalbum, purchase_price
export default {
  components: {
    SubPage,
    MainCard,
    CardTopInfo,
    // MyTable,
  },
  data() {
    return {
      pre_file_auido: '',
      pre_file_video: '',
      loading: false,
      media: '',
      chapter: {
        album_info_title: '',
        album_info_time_size: '300',
        audio_address: '',
        video_address: '',
        // audio_address: '',
        // video_address: '',
        sort: '',
        is_need_pay: '1',
      },
      album_id: null,
      album_info_id: null,
      rules: {
        album_info_title: [{ required: true, message: '请输入小节名称', trigger: 'blur' }],
        media: [{ required: true, message: '请选择类型', trigger: 'blur' }],
        is_need_pay: [{ required: true, message: '请选择试看类型', trigger: 'blur' }],
        sort: [{ required: true, message: '请选择集数', trigger: 'blur' }],
      },
    };
  },
  created() {
    console.log(`this.$route${this.$route.query.id}`);
    console.log(this.$route.query.id);
    if (this.$route.query.id) {
      this.album_info_id = this.$route.query.id;
    }
    if (this.$route.query.album_id) {
      this.album_id = this.$route.query.album_id;
    } else {
      this.$message('id异常 ，请退出重进');
    }
    if (this.$route.query.media) {
      this.media = this.$route.query.media;
    }
    if (this.album_info_id) {
      this.getChapterInfo();
    }
  },
  methods: {
    getChapterInfo() {
      getChapterDetail({
        album_info_id: this.album_info_id,
      })
        .then((res) => {
          console.log(res);
          if (res.data) {
            this.chapter.album_info_play_volume = res.data.album_info_play_volume || 300;
            this.chapter.album_info_title = res.data.album_info_title || '';
            this.chapter.is_need_pay = res.data.is_need_pay || '';
            this.chapter.sort = res.data.sort || '';
            this.chapter.video_address = res.data.video_address || '';
            this.chapter.audio_address = res.data.audio_address || '';
            if (res.data.video_address) {
              this.media = 'video';
            }
            if (res.data.audio_address) {
              this.media = 'audio';
            }
          } else {
            console.log('err');
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    saveChapterInfo() {
      // if (this.chapter.audio_address) {
      //   return;
      // }
      const params = {
        album_id: this.album_id,
        album_info_id: this.album_info_id,
        album_info_title: this.chapter.album_info_title,
        sort: this.chapter.sort,
        is_need_pay: this.chapter.is_need_pay,
      };
      if (this.media === 'video') {
        params.video_address = this.chapter.video_address;
        const { cusvideo } = this.$refs;
        this.chapter.album_info_time_size = cusvideo.duration || '';
        params.video_address = this.chapter.video_address;
      } else {
        params.audio_address = this.chapter.audio_address;
        const { cusaudio } = this.$refs;
        this.chapter.album_info_time_size = cusaudio.duration || '';
        params.audio_address = this.chapter.audio_address;
      }
      if (this.chapter.album_info_time_size) {
        params.album_info_time_size = this.chapter.album_info_time_size;
      }
      saveChapterDetail(params)
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.$message.success('新增成功');
            setTimeout(() => {
              this.$router.go(-1);
            }, 1500);
          } else {
            this.$message.error('新增失败');
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error('新增失败');
        });
    },
    editChapterInfo() {
      const params = {
        album_info_id: this.album_info_id,
        album_info_title: this.chapter.album_info_title,
        sort: this.chapter.sort,
        is_need_pay: this.chapter.is_need_pay,
      };
      if (this.media === 'video') {
        params.video_address = this.chapter.video_address;
      } else {
        params.audio_address = this.chapter.audio_address;
      }
      if (this.chapter.album_info_time_size) {
        params.album_info_time_size = this.chapter.album_info_time_size;
      }
      editChapterDetail(params)
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.$message.success('编辑成功');
            setTimeout(() => {
              this.$router.go(-1);
            }, 1500);
          } else {
            this.$message.error('编辑失败');
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error('编辑失败');
        });
    },
    onSubmit() {
      // this.$router.push('addChapter');
      const params = {
        album_info_id: this.album_info_id,
        album_info_title: this.chapter.album_info_title,
        sort: this.chapter.sort,
        is_need_pay: this.chapter.is_need_pay,
      };
      if (this.media === 'video') {
        if (!this.chapter.video_address) {
          this.$message.error('请上传视频');
          return;
        }
        const { cusvideo } = this.$refs;
        this.chapter.album_info_time_size = cusvideo.duration || '';
        params.video_address = this.chapter.video_address;
      } else {
        if (!this.chapter.audio_address) {
          this.$message.error('请上传音频');
          return;
        }
        const { cusaudio } = this.$refs;
        this.chapter.album_info_time_size = cusaudio.duration || '';
        params.audio_address = this.chapter.audio_address;
      }
      const formName = 'chapter';

      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert('submit!');
          console.log(params);
          console.log(this.album_info_id);
          if (this.album_info_id) {
            this.editChapterInfo();
          } else {
            this.saveChapterInfo();
          }
          return true;
        }
        this.$message('请完善信息');
        console.log('error submit!!');
        return false;
      });
    },
    reBack() {
      this.$confirm('取消后编辑内容不会保存, 是否继续?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning',
      })
        .then(() => {
          this.$router.go(-1);
        })
        .catch(() => {});
    },
    handleFile(e) {
      // 处理文件
      console.log(e);
      const fileSize = e.file.size / 1024 / 1024;
      console.log(`fileSize${fileSize}`);
      // 压缩一下文件
      if (this.media === 'audio') {
        // this.pre_file_auido = e.file;
        this.requestUploadAUDIO(e.file);
      } else {
        // this.pre_file_video = e.file;
        this.requestUploadVIDEO(e.file);
      }
    },
    /* base 64 转换成file  这里对base64 进行压缩 */
    requestUploadAUDIO(file) {
      if (this.loading) {
        return;
      }
      this.loading = true;
      const formData = new FormData();
      formData.append('file', file);
      upLoadMediaFile(formData)
        .then((res) => {
          console.log(res);
          this.chapter.audio_address = res.data.filePath;
          this.$message.success('音频上传成功');
          this.loading = false;
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
          // this.pre_file_video = this.chapter.audio_address;
          this.$message.error('音频上传失败');
        });
    },
    requestUploadVIDEO(file) {
      if (this.loading) {
        return;
      }
      this.loading = true;
      const formData = new FormData();
      formData.append('file', file);
      upLoadMediaFile(formData)
        .then((res) => {
          console.log(res);
          this.chapter.video_address = res.data.filePath;
          this.loading = false;
          this.$message.success('视频上传成功');
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
          // this.pre_file_audio = this.chapter.audio_address;
          this.$message.error('视频上传失败');
        });
    },
  },
};
</script>

<style lang="less" scoped>
.chapter {
  width: 60%;
  // height: 80px;
  padding: 36px;
  // display: flex;
  // justify-content: flex-start;
  // align-items: center;
}
.img-wrap {
  display: flex;
  .cusaudio {
    margin-left: 40px;
    width: 260px;
    height: 250px;
  }
  .cusvideo {
    margin-left: 40px;
    width: 260px;
    height: 250px;
  }
}
// .cusaudio {
//   width: 120px;
// }
// .cusvideo {
//   width: 120px;
// }
</style>
